import Types from 'prop-types'

import styles from './index.module.scss'

import classnames from 'classnames'

// 为了实现 额外文字的文本框
// 为额外的文字信息 添加 点击事件，约定：额外信息的点击事件：onExtraClick()
// className 样式
// ...rest 表示传递给该组件的所有其他属性，这些属性不需要额外处理，直接原封不动的传递给 Input 即可
const Input = ({ extra, onExtraClick, className, dom, ...rest }) => {
  return (
    <div className={styles.root}>
      <input
        type="text"
        // 如果在使用组件时没有传递className, 此时，className值 为 undefined, 这个类名就不会被添加到 class中
        // 如果在使用组件时传递了className, 此时，className值 为 字符串的值，这个类就会添加到class中
        // className={className ? `geek-input ${className}` : 'geek-input'}
        className={classnames('geek-input', className)}
        // input组件接收到 dom 属性后。转交给 input DOM 元素。
        ref={dom}
        {...rest}
      />
      {/* <span className="extra-text">发送验证码</span> */}
      {/* 只在 extra 属性传入值的时候，才展示 extra 的信息, 没传入值就不展示 extra 的信息 */}
      {extra && (
        <span className="extra-text" onClick={onExtraClick}>
          {extra}
        </span>
      )}
    </div>
  )
}

Input.propTypes = {
  extra: Types.string,
  onExtraClick: Types.func,
  className: Types.string,
}

export default Input
